<template>
    <d2-container :filename="filename">

        <template slot="header">
            <el-steps :active="activeIdx" align-center finish-status="success">
                <el-step title="待付款" description="2018-12-12 12:02:12"></el-step>
                <el-step title="待发货" description="2018-12-12 12:02:12"></el-step>
                <el-step title="待收货" description="2018-12-12 12:02:12"></el-step>
                <el-step title="待归还" description="2018-12-12 12:02:12"></el-step>
                <el-step title="已完成" description="2018-12-12 12:02:12"></el-step>
            </el-steps>
        </template>
        <el-row>
            <el-col :span="20" :offset="2">
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <el-row>
                            <el-col :span="12">
                                <span>订单状态&nbsp;&nbsp;</span>
                                <span class="order-status-text">{{detail.main_status | statusValueFilter}}</span>
                            </el-col>
                            <el-col :span="12" style="text-align: right;">
                                <el-button-group>
                                    <el-button type="primary" icon="el-icon-edit">改价</el-button>
                                    <el-button type="primary" icon="el-icon-share">发送站内信</el-button>
                                    <el-button type="primary" icon="el-icon-document">备注</el-button>
                                    <el-button type="primary" icon="el-icon-circle-close-outline">关闭</el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="margin-top: 10px">
                        <d2-icon-svg class="icon" name="message" />
                        <span class="font-small">基本信息</span>
                    </div>
                    <div class="table-layout">
                        <el-row>
                            <el-col :span="4" class="table-cell-title">订单编号</el-col>
                            <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
                            <el-col :span="4" class="table-cell-title">用户账号</el-col>
                            <el-col :span="4" class="table-cell-title">支付方式</el-col>
                            <el-col :span="4" class="table-cell-title">订单来源</el-col>
                            <el-col :span="4" class="table-cell-title">订单类型</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="4" class="table-cell-title">订单编号</el-col>
                            <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
                            <el-col :span="4" class="table-cell-title">用户账号</el-col>
                            <el-col :span="4" class="table-cell-title">支付方式</el-col>
                            <el-col :span="4" class="table-cell-title">订单来源</el-col>
                            <el-col :span="4" class="table-cell-title">订单类型</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                            <el-col :span="4" class="table-cell">￥{{detail.total_fee}}</el-col>
                        </el-row>
                    </div>

                    <div style="margin-top: 20px">
                        <d2-icon-svg class="icon" name="message" />
                        <span class="font-small">收货人信息</span>
                    </div>
                    <div class="table-layout">
                        <el-row>
                            <el-col :span="3" class="table-cell-title">收货人</el-col>
                            <el-col :span="6" class="table-cell-title">手机号码</el-col>
                            <el-col :span="6" class="table-cell-title">邮政编码</el-col>
                            <el-col :span="9" class="table-cell-title">收货地址</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3" class="table-cell">夏文晔</el-col>
                            <el-col :span="6" class="table-cell">13253503652</el-col>
                            <el-col :span="6" class="table-cell">420000</el-col>
                            <el-col :span="9" class="table-cell">武汉市江夏区光谷智慧园28栋小咪网络</el-col>
                        </el-row>
                    </div>

                    <!--支付记录-->
                    <div style="margin-top: 20px">
                        <d2-icon-svg class="icon" name="message" />
                        <span class="font-small">支付记录</span>
                    </div>
                    <el-table
                            border fit highlight-current-row style="width: 100%;margin-top: 20px;"
                            :data="feeItems">
                        <el-table-column label="支付单号" min-width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="续租租期" min-width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.direction}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="支付方式" min-width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.direction}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="生效时间" min-width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.direction}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="失效时间" min-width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.direction}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="应付金额" min-width="60" align="center">
                            <template slot-scope="scope">
                                {{scope.row.remark}}
                            </template>
                        </el-table-column>
                        <el-table-column label="实付金额" min-width = "60px" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.fee}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width = "120px" align="center">
                            <template slot-scope="scope">
                                <el-button type="success" icon= "el-icon-view" size="mini" plain>查看费用详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="margin-top: 20px">
                        <d2-icon-svg class="icon" name="message" />
                        <span class="font-small">商品信息</span>
                    </div>
                    <el-table
                            :data="orderItems"
                            style="width: 100%;margin-top: 20px" border>
                        <el-table-column label="商品图片" width="120" align="center">
                            <template slot-scope="scope">
                                <img :src="scope.row.productPic" style="height: 80px">
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.productName}}</span>
                                <span>品牌：{{scope.row.productBrand}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格/货号" width="120" align="center">
                            <template slot-scope="scope">
                                <span>价格：￥{{scope.row.productPrice}}</span>
                                <span>货号：{{scope.row.productSn}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="属性" width="120" align="center">
                            <template slot-scope="scope">
                                {{scope.row.productAttr}}
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" width="120" align="center">
                            <template slot-scope="scope">
                                {{scope.row.productQuantity}}
                            </template>
                        </el-table-column>
                        <el-table-column label="小计" width="120" align="center">
                            <template slot-scope="scope">
                                1000
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--费用-->

                    <div style="margin-top: 20px">
                        <d2-icon-svg class="icon" name="message" />
                        <span class="font-small">费用信息</span>
                    </div>
                    <el-table
                            border fit highlight-current-row style="width: 100%;margin-top: 20px;"
                            :data="feeItems"
                         >
                        <el-table-column label="标题" width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="金额" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.fee}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="方向" width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.direction}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" width="120" align="center">
                            <template slot-scope="scope">
                                {{scope.row.remark}}
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--操作日志-->
                    <div style="margin-top: 20px">
                        <d2-icon-svg class="icon" name="message" />
                        <span class="font-small">操作记录</span>
                    </div>
                    <el-table
                            border fit highlight-current-row style="width: 100%;margin-top: 20px;"
                            :data="feeItems">
                        <el-table-column label="标题" min-width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="方向" min-width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.direction}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" min-width="120" align="center">
                            <template slot-scope="scope">
                                {{scope.row.remark}}
                            </template>
                        </el-table-column>
                        <el-table-column label="金额" min-width = "60px" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.fee}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </d2-container>
</template>

<script>
    import {getById} from "@/api/order/lease-order";
    import {statusKeyValue} from "./common";

    const STATUS_OPTIONS = {
        PENDING_PAYMENT: 0,
        PENDING_DELIVERY: 1,
        PENDING_RECEIVING: 2,
        PENDING_RETURNED: 3,
        CLOSED: 4,
    };

    export default {
        name: "order-detail",
        filters: {
            statusValueFilter(status) {
                return statusKeyValue[status];
            }
        },
        data() {
            return {
                filename: __filename,
                activeIdx: 0,
                orderItems: [
                    {
                        productPic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg',
                        productName: '华为 HUAWEI P20',
                        productBrand: '华为',
                        productPrice: '',
                        productSn: '',
                        productAttr: '',
                        productQuantity: '',

                    },
                    {
                        productPic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg',
                        productName: '华为 HUAWEI P20',
                        productBrand: '华为',
                        productPrice: '',
                        productSn: '',
                        productAttr: '',
                        productQuantity: '',

                    },
                    {
                        productPic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg',
                        productName: '华为 HUAWEI P20',
                        productBrand: '华为',
                        productPrice: '',
                        productSn: '',
                        productAttr: '',
                        productQuantity: '',

                    }
                ],
                feeItems: [{
                    title: '订单金额',
                    fee: '100',
                    direction: 'ADD',
                    remark: '顺丰包邮'
                }, {
                    title: '运费',
                    fee: '100',
                    direction: 'ADD',
                    remark: '顺丰包邮'
                }, {
                    title: '折扣金额',
                    fee: '100',
                    direction: 'ADD',
                    remark: '顺丰包邮'
                },{
                    title: '积分抵消',
                    fee: '100',
                    direction: 'ADD',
                    remark: '顺丰包邮'
                }],
                detail: {
                    after_status: "NOT_LAUNCHED",
                    create_time: "2019-03-04 09:34:39",
                    delivery_time: "2019-03-14 17:33:51",
                    end_time: "2019-03-14 17:34:00",
                    freight: 100,
                    id: "4",
                    last_pay_fee: 100,
                    last_pay_time: "2019-03-21 17:33:54",
                    main_status: "PENDING_RETURNED",
                    remark: "测试备注",
                    shop_id: 1,
                    start_time: "2019-03-28 17:33:57",
                    total_fee: 100,
                    tx_status: "BREAKING",
                    update_time: "2019-03-05 10:08:06",
                    user_id: 1,
                    user_remark: "测试备注",
                    version: 1
                }
            }
        },
        created() {
            this.getDetail();
        },
        methods: {
            getDetail() {
                getById(this.$route.params.id).then(res => {
                    this.detail = res;
                    console.log();
                    this.activeIdx = STATUS_OPTIONS[res.main_status]
                })
            }
        }

    }
</script>

<style scoped>

    .icon {
        height: 20px;
        width: 20px;
        margin-right: 8px;
        transition: all .3s;
        cursor: pointer;
    }

    .font-small {
        display: inline-block;
        height: 20px;
        vertical-align: top;
        font-weight: bold;
    }

    .order-status-text {
        color: #ED9D2E;
    }

    .box-card {
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .table-layout {
        margin-top: 10px;
        border-left: 1px solid #DCDFE6;
        border-top: 1px solid #DCDFE6;
    }

    .table-cell-title {
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        background: #F2F6FC;
        text-align: center;
        font-size: 14px;
        color: #303133;
    }

    .table-cell {
        height: 60px;
        line-height: 40px;
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        overflow: hidden;
    }

</style>
